<template>
  <div v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="dataForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('类型标识')" prop="typeIdentifier">
            <el-input v-model="form.typeIdentifier" :placeholder="$t('类型标识')" maxlength="50" show-word-limit :disabled="isDisabled" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('使用位置')" prop="useLocation">
            <el-input v-model="form.useLocation" maxlength="50" show-word-limit :placeholder="$t('使用位置')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('费用报销')" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('费用报销')" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="area-header">
        <span class="area-header-title">{{ $t('科目类型') }}</span>
      </div>
      <!--:tree-props="{children: 'children', hasChildren: 'hasChildren'}"-->
      <el-table
        :data="form.children"
        row-key="id"
        border
        :default-expand-all="false"
        class="treeTable treeDiyTable formTable"
      >
        <el-table-column :label="$t('科目名称')">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('科目名称') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.subjectName" maxlength="50" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('科目类型')" prop="subjectType">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('科目类型') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.subjectType" maxlength="50" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column :label="$t('科目编号')" prop="subjectCode">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('科目编号') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.subjectCode" maxlength="50" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column :label="$t('排序')" prop="sort">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('排序') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <el-input-number v-model="scope.row.sort" min="0" max="999" oninput="value=value.replace(/[^\d.]/g,'')" maxlength="20" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" width="150px" align="center">
          <template slot-scope="scope">
            <!-- 判断下面是否有子菜单，有子菜单无添加按钮 -->
            <el-button
              v-if="scope.row.parentId === '0' || scope.row.parentId === 0"
              type="text"
              size="small"
              @click="addItem(scope.$index, scope.row)"
            >{{ $t('添加下级') }}</el-button>
            <el-button type="text" size="small" @click="delItem(scope.$index, scope.row, scope.row.uuid)">{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="AddRow">{{ $t("添加") }}</el-button>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button v-hasPermi="['system:subjects:edit']" type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
    </div>
  </div>
</template>

<script>
import { saveFdSubjects, getFdSubjects, delTree } from '@/api/fd/config/fdSubjects'
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['fdSubjectsData'],
  data() {
    return {
      loading: false,
      hasChildren: true,
      // 表单参数
      form: {
        // 菜单表格结构数据
        children: []
      },
      // 表单校验
      rules: {
        typeIdentifier: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        useLocation: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        remark: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      },
      childrenListDataRules: {
        subjectCode: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        subjectName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        subjectType: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      },
      curId: '',
			isDisabled: true,
      submitCheckCount: 0
    }
  },

  watch: {
    fdSubjectsData: function() {
      this.form = this.fdSubjectsData
    }
  },
  mounted() {
    this.$nextTick(function() {})
  },

  methods: {
    // 添加一级科目
    AddRow() {
      const row = {
        subjectName: '',
        subjectType: '',
        sort: '',
        subjectCode: '',
        parentId: 0,
        children: [],
        uuid: new Date().getTime()
      }
      if (!(this.form.children instanceof Array)) {
        this.$set(this.form, 'children', [])
      }
      this.$nextTick(() => {
        this.form.children.push(row)
      })
    },
    // 添加二级
    addItem(index, row) {
      const item = {
        subjectName: '',
        subjectType: '',
        sort: '',
        subjectCode: '',
        parentId: undefined,
        id: '',
        uuid: new Date().getTime()
      }
      if (!row.children) {
        this.$set(row, 'children', [])
      }
      row.children.push(item)
    },
    // 删除
    delItem(index, row) {
      const id = row.id
      if (id !== null && id !== '' && id !== undefined) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(function() {
          return delTree(id)
        }).then(() => {
          this.delItem2(index, row)
          return this.msgSuccess(this.$t('删除成功'))
        })
      } else {
        this.delItem2(index, row)
      }
    },
    delItem2(index, row) {
      const rowText = row.subjectName + '_' + row.subjectType + '_' + row.subjectCode + '_' + row.sort
      this.form.children.some((item, index) => {
        if ((item.subjectName + '_' + item.subjectType + '_' + item.subjectCode + '_' + item.sort) === rowText) {
          this.form.children.splice(index, 1)
          return true
        }
        item.children.some((item2, index2) => {
          if ((item2.subjectName + '_' + item2.subjectType + '_' + item2.subjectCode + '_' + item2.sort) === rowText) {
            item.children.splice(index2, 1)
            return true
          }
        })
      })
    },
    // 初始化数据
    init(id) {
      this.childrenListData = []
      if (id != null && id !== '') {
        this.loading = true
        this.getFdSubjects(id)
        this.curId = id
      } else {
        this.reset()
      }
    },
    // 获取数据
    getFdSubjects(id) {
      getFdSubjects(id).then(response => {
        this.form = response.data
        this.form.children = response.data.children
        this.form.childrenListData = response.data.children
        this.loading = false
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        typeIdentifier: undefined,
        useLocation: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        children: []
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    submitCheckNull(item) {
      if (item.subjectCode === null || item.subjectCode === '' || item.subjectCode === undefined) {
        this.submitCheckCount++
      }
      if ((item.subjectName === null || item.subjectName === '' || item.subjectName === undefined)) {
        this.submitCheckCount++
      }
      if ((item.subjectType === null || item.subjectType === '' || item.subjectType === undefined)) {
        this.submitCheckCount++
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.submitCheckCount = 0
      this.form.children.some(item => {
        this.submitCheckNull(item)
        item.children.some(item2 => {
          this.submitCheckNull(item2)
        })
      })
      if (this.submitCheckCount > 0) {
        this.msgError(this.$t('请输入必填项!'))
      }
      this.$refs['form'].validate(valid => {
        if (valid && this.submitCheckCount <= 0) {
          this.loading = true
          saveFdSubjects(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.$parent.$parent.formOpen = false
              this.$parent.$parent.getList()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
